<div id="wrapper">
    <div id="column_right">
        <div id="block_connection">
            <div id="block_connection_noConnected" style="display: none">
                <h3>S'authentifier</h3>
                <p class="error"></p>
                <?php echo $this->form ?>
                <a href="<?php echo $this->url(array('controller' => 'inscription'), 'default', true) ?>">Inscription</a>
            </div>
            <div id="block_connection_connected" style="display: none">
                <a style="float: right" href="" id="disconnect">Se déconnecter</a>
                <h3>Mon compte</h3>
                <p>Votre login : <span id="login_connected"></span></p>
            </div>        
        </div>
        <div id="block_users_connected">
            <h3>Personnes présentes</h3>
            <ul id="list_users_connected">
                <?php
                foreach ($this->usersConnected as $login) :
                    echo '<li>' . $this->escape($login) . '</li>';
                endforeach;
                ?>
            </ul>
        </div>
    </div>

    <div id="column_main">
        <div id="block_messages">
        </div>
        <div id="block_current_message">
            <?php echo $this->formText('current_message', 'Votre message', array('class' => 'current_message_empty')); ?>
        </div>
    </div>
</div>

<script type="text/javascript">
    var lastClickTime;
    
    $(window).unload(function() { 
        disconnect();
    });
    
    $(document).ready(function() {
        authentification(<?php echo $this->isConnected ?>,'<?php echo $this->login ?>');
        
        $("#form_connection").submit(function() {
            var loginVal = $("#login").val();
            var pwdVal = $("#pwd").val();
            $.ajax({
                url: "/index/checkauhentification",
                type: "POST",
                data: {login: loginVal, pwd: pwdVal},
                dataType: "json",
                success: function(data) {
                    $(".error").html(data.message);
                    authentification(true,loginVal);
                    displayListUser();
                    lastClickTime = new Date();
                }
            });
            return false;
        });
        
        $("#disconnect").click(function(){
            disconnect();
            return false;   
        });
        
        $(this).click(function() {
            lastClickTime = new Date();
        });
        
        setInterval(displayListUser, 10000);
        setInterval(displayListMessages, 1000);
        setInterval(checkActivity, 10000);
        
        
        $("#current_message").focus(function(){
            if($(this).val()=='Votre message') {
                $(this).val('');
                $(this).removeClass('current_message_empty');
            }
            $(this).keypress(function(e) {
                if(e.keyCode == 13 && $(this).val()!='') {
                    sendMessage($(this).val());
                    $(this).val('');
                }
            });
        });
        $("#current_message").focusout(function(){
            if($(this).val()=='') {
                $(this).addClass('current_message_empty');
                $(this).val('Votre message');
            }
        });
    });
    
    function disconnect() {
        $.ajax({
            url: "/index/disconnect",
            dataType: "json",
            success: function(data) {
                $(".error").html(data.message);
                authentification(false);
                displayListUser();
            }
        });      
    }
    
    function checkActivity() {
        if( (new Date().getTime() - lastClickTime.getTime()) > 60000 * 5) {
            disconnect();
        }
    }
    
    function sendMessage(message) {
        $.ajax({
            url: "/index/sendmessage",
            type: "POST",
            data: {text: message},
            success: function(data) {
                if(data.status == 'error') {
                    alert('Vous devez être connecté pour pouvoir posté des messages');
                }
            }
        });
    }
    
    function authentification(isConnected,login) {
        if(isConnected) {
            $("#block_connection_noConnected").hide();
            $("#login_connected").html(login);
            $("#block_connection_connected").show();
            $("#current_message").show();

        }
        else {
            $("#block_connection_noConnected").show();
            $("#block_connection_connected").hide();
            $("#current_message").hide();
        }
    }
    
    function displayListUser() {
        var listElement = $("#list_users_connected");
        $.ajax({
            url: "/index/listusersconnected",
            success: function(data) {
                listElement.empty();
                for (var i in data) {
                    listElement.append(($('<li>', {
                        text: data[i]
                    })));
                }
            }
        });
    }
    
    function displayListMessages() {
        var listElement = $("#block_messages");
        $.ajax({
            url: "/index/getmessages",
            type: "POST",
            dataType: 'json',
            success: function(data) {
                listElement.empty();
                for(var i in data) {
                    var messageElement = $(document.createElement('p'));
                    messageElement.text('['+data[i].date+'] '+data[i].userlogin+' : '+data[i].text);
                    listElement.append(messageElement);
                }
                listElement.animate({scrollTop: listElement.height()},400)
            }
        });
    }
</script>